<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="100px">
            <el-form-item label="申请单标题" prop="applyTitle">
                <el-input
                        v-model="queryParams.applyTitle"
                        placeholder="请输入申请单标题"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="申请单号" prop="purApplyId">
                <el-input
                        v-model="queryParams.purApplyId"
                        placeholder="请输入申请单号"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="任务单编号" prop="purTaskId">
                <el-input
                        v-model="queryParams.purTaskId"
                        placeholder="请输入任务单编号"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="采购负责人" prop="purLiableUser">
                <el-input
                        v-model="queryParams.purLiableUser"
                        placeholder="请输入采购负责人"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="负责人姓名" prop="purLiableUserName">
                <el-input
                        v-model="queryParams.purLiableUserName"
                        placeholder="请输入采购负责人姓名"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="任务状态" prop="status">
                <el-input
                        v-model="queryParams.status"
                        placeholder="请输入任务状态"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table v-loading="loading" border :data="purTaskBillList">
            <el-table-column label="申请单号" align="center" prop="purApplyId" width="120"/>
            <el-table-column label="标题" align="center" prop="applyTitle" :show-overflow-tooltip="true"/>
            <el-table-column label="申请人姓名" align="center" prop="applyUserName" width="100"/>
            <el-table-column label="所属部门" align="center" prop="deptName" :show-overflow-tooltip="true"/>
            <el-table-column label="任务单号" align="center" prop="purTaskId" width="120"/>
            <el-table-column label="负责人" align="center" prop="purLiableUser" :show-overflow-tooltip="true"/>
            <el-table-column label="负责人姓名" align="center" prop="purLiableUserName" :show-overflow-tooltip="true"/>
            <el-table-column label="任务状态" align="center" prop="status" :show-overflow-tooltip="true"/>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="270">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-view"
                            @click="handleView(scope.row)"
                    >查看申请单
                    </el-button>
                    <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-edit"
                            @click="addTaskLiableUser(scope.row)"
                            v-show="scope.row.purTaskId==null"
                    >设置采购人
                    </el-button>
                    <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-delete"
                            @click="handleDelete(scope.row)"
                            v-show="scope.row.purTaskId!=null && (scope.row.status=='下发未认领' || scope.row.status=='未下发')"
                    >修改采购人
                    </el-button>
                    <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-delete"
                            @click="handleDelete(scope.row)"
                            v-show="scope.row.purTaskId!=null && scope.row.status=='已认领'"
                    >任务单转派
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination
                v-show="total>0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
        />
        <modifyApplyBill
                :dialogFormVisible="modifyApplyBillVisible"
                :formData="formData"
                :viewFlag="viewFlag"
                @cancel="modifyApplyBillCancel">
        </modifyApplyBill>
        <el-dialog :title="taskTitle" :visible.sync="taskOpen" width="700px" append-to-body>
            <el-form ref="form" :model="taskForm" :rules="taskRules" label-width="100px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="申请单标题" prop="applyTitle">
                            <el-input
                                    placeholder="请输入申请单标题"
                                    v-model="taskForm.applyTitle"
                                    readonly
                                    size="small">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="申请单编号" prop="purApplyId">
                            <el-input
                                    v-model="taskForm.purApplyId"
                                    readonly
                                    size="small">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="采购流程编号" prop="purMainId">
                            <el-input
                                    v-model="taskForm.purMainId"
                                    readonly
                                    size="small">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="发起人" prop="applyUser">
                            <el-input
                                    v-model="taskForm.applyUser"
                                    readonly
                                    size="small"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="发起人姓名" prop="applyUserName">
                            <el-input
                                    v-model="taskForm.applyUserName"
                                    readonly
                                    size="small"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="发起时间" prop="applyCreateTime">
                            <el-input
                                    v-model="taskForm.applyCreateTime"
                                    readonly
                                    size="small"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="所属部门" prop="deptName">
                            <el-input
                                    v-model="taskForm.deptName"
                                    readonly
                                    size="small"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="负责人姓名" prop="purLiableUserName">
                            <el-input v-model="taskForm.purLiableUserName" readonly>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="采购负责人" prop="purLiableUser">
                            <el-input v-model="taskForm.purLiableUser" placeholder="设置负责人" readonly>
                                <el-button slot="append" icon="el-icon-search" @click="handleLiableUser">设置负责人</el-button>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" icon="el-icon-plus" @click="addTask">保存为草稿</el-button>
                <el-button type="success" icon="el-icon-edit" @click="addAndSubmitTask">设置并下发任务</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
        <!--查询用户对话框-->
        <el-dialog title="选择采购负责人" :visible.sync="queryUserOpen" width="920px" append-to-body>
            <el-form :inline="true" :model="queryUserParams" ref="queryUserParams">
                <el-form-item label="用户姓名" prop="loginName">
                    <el-input
                            v-model="queryUserParams.loginName"
                            placeholder="请输入用户姓名"
                            clearable
                            size="small"
                    />
                </el-form-item>
                <el-form-item label="用户名" prop="userName">
                    <el-input
                            v-model="queryUserParams.userName"
                            placeholder="请输入用户名"
                            clearable
                            size="small"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="getUserList">查询</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetForm('queryUserParams')">重置</el-button>
                </el-form-item>
            </el-form>
            <el-table
                    border
                    :row-style="{height:0+'px'}"
                    :cell-style="{padding:0+'px'}"
                    :data="userList"
                    default-expand-all>
                <el-table-column label="用户名" align="center" prop="userName"/>
                <el-table-column label="用户姓名" align="center" prop="loginName"/>
                <el-table-column label="部门" align="center" prop="dept.deptName" :show-overflow-tooltip="true"/>
                <el-table-column label="岗位" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span>{{formatPosts(scope.row.posts)}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="角色" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span>{{formatRoles(scope.row.roles)}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-edit"
                                @click="checkUser(scope.row)"
                        >选择
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination
                    v-show="userTotal>0"
                    :total="userTotal"
                    :page.sync="queryUserParams.pageNum"
                    :limit.sync="queryUserParams.pageSize"
                    @pagination="getUserList"
            />
            <div slot="footer" class="dialog-footer">
                <el-button icon="el-icon-back" @click="queryUserCancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {queryGoodsBillAndUserInfo} from "@/api/purchase/apply.js";
    import {listPurTask,addPurTask} from "@/api/purchase/task.js";
    import {listCond} from "@/api/system/user";

    import modifyApplyBill from "@/views/purchase/apply/modifyApplyBill";

    export default {
        name: "taskList",
        components: {modifyApplyBill},
        data() {
            return {
                // 遮罩层
                loading: true,
                // 总条数
                total: 0,
                // 任务单表格数据
                purTaskBillList: [],
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    applyTitle: undefined,
                    purApplyId: undefined,
                    purTaskId: undefined,
                    purLiableUser: undefined,
                    purLiableUserName: undefined,
                    status: undefined
                },
                modifyApplyBillVisible: false,
                formData: undefined,
                viewFlag: true,
                taskTitle: "",
                taskOpen: undefined,
                taskForm: {},
                taskRules: {},
                queryUserOpen: false,
                userList: [],
                queryUserParams: {
                    pageNum: 1,
                    pageSize: 10,
                    userName: undefined,
                    loginName: undefined
                },
                userTotal: 0,
                userTaskIndex: undefined,
                checkUserInfo: {
                    approvalType: "",
                    approvalUserName: "",
                    approvalUser: ""
                }
            };
        },
        created() {
            this.getList();
        },
        methods: {
            /** 查询仓库列表 */
            getList() {
                this.loading = true;
                listPurTask(this.queryParams).then(response => {
                    this.purTaskBillList = response.rows;
                    this.total = response.total;
                    this.loading = false;
                });
            },
            /** 查询按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm("queryForm");
                this.handleQuery();
            },
            modifyApplyBillCancel() {
                this.getList();
                this.modifyApplyBillVisible = false
            },
            handleView(row) {
                this.viewFlag = false;
                queryGoodsBillAndUserInfo(row).then(response => {
                    row.roles = response.data.roleNames;
                    row.posts = response.data.postNames;
                    row.purApplyGoodsBillVoList = response.data.purApplyGoodsBillList;
                });
                //this.formData = Object.assign({},row);
                this.formData = row;
                this.$set(this.formData, 'purApplyId', row.purApplyId);
                this.$set(this.formData, 'roles', row.roles);
                this.$set(this.formData, 'posts', row.posts);
                this.$set(this.formData, 'purApplyGoodsBillVoList', row.purApplyGoodsBillVoList);
                this.$set(this.formData, 'deleteGoodsList', []);
                this.modifyApplyBillVisible = true;
            },
            addTaskLiableUser(row) {
                this.taskForm = row;
                this.taskOpen = true;
                this.taskTitle = "设置采购负责人";
            },
            cancel(){
                this.taskForm.purLiableUser = "";
                this.taskForm.purLiableUserName = "";
                this.taskForm = {};
                this.taskTitle = "";
                this.taskOpen = false;
            },
            addTask(){
                let queryData = {
                    purMainId: this.taskForm.purMainId,
                    purLiableUserName: this.taskForm.purLiableUserName,
                    purLiableUser: this.taskForm.purLiableUser,
                    status: "未下发"
                };
                addPurTask(queryData).then(response => {
                    if (response.code === 200) {
                        this.msgSuccess("采购任务单设置成功！");
                        this.getList();
                        this.taskOpen = false;
                    } else {
                        this.msgError(response.msg);
                    }
                });
            },
            addAndSubmitTask(){
                let queryData = {
                    purMainId: this.taskForm.purMainId,
                    purLiableUserName: this.taskForm.purLiableUserName,
                    purLiableUser: this.taskForm.purLiableUser,
                    status: "下发未认领"
                };
                addPurTask(queryData).then(response => {
                    if (response.code === 200) {
                        this.msgSuccess("采购任务单设置成功！");
                        this.getList();
                        this.taskOpen = false;
                    } else {
                        this.msgError(response.msg);
                    }
                });
            },
            handleLiableUser() {
                this.queryUserOpen = true;
            },
            getUserList() {
                listCond(this.queryUserParams).then(response => {
                        this.userList = response.rows;
                        this.userTotal = response.total;
                    }
                );
            },
            checkUser(row) {
                this.taskForm.purLiableUser = row.userName;
                this.taskForm.purLiableUserName = row.loginName;
                this.queryUserOpen = false;
            },
            queryUserCancel() {
                this.taskForm.purLiableUser = "";
                this.taskForm.purLiableUserName = "";
                this.queryUserOpen = false;
            },
            formatPosts(posts) {
                var postString = "";
                if (posts != null && posts != undefined && posts.length > 0) {
                    for (var i = 0; i < posts.length; i++) {
                        postString = postString + posts[i].postName;
                        if (i < posts.length - 1) {
                            postString = postString + ","
                        }
                    }
                }
                return postString;
            },
            formatRoles(roles) {
                var roleString = "";
                if (roles != null && roles != undefined && roles.length > 0) {
                    for (var i = 0; i < roles.length; i++) {
                        roleString = roleString + roles[i].roleName;
                        if (i < roles.length - 1) {
                            roleString = roleString + ","
                        }
                    }
                }
                return roleString;
            }
        }
    };
</script>





